<%--
  Created by IntelliJ IDEA.
  User: 2862351985
  Date: 2021/4/5
  Time: 14:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>欢迎注册</title>


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- Theme style -->
    <!-- iCheck -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/iCheck/square/blue.css">



    <!--用户名存在提示-->
    <script>
        if (${param.check}){
            alert("用户名已经存在")
        }
    </script>

    <!--用户名提示-->
    <script>
        if (${requestScope.check}){
            alert("用户名已存在")
        }
    </script>
</head>

<body class="hold-transition register-page">
<div class="register-box">
    <div class="register-logo">


        <a href="all-admin-index.html"><b>教师</b>后台管理系统</a>


    </div>

    <div class="register-box-body">
        <p class="login-box-msg">新用户注册</p>

        <form action="${pageContext.request.contextPath}/uses/register" method="post" id="form01">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="姓名" name="use_name" id="use_name" value="${requestScope.use_name}">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="iPhone" class="form-control" placeholder="电话" name="phone_num" id="use_phone">
                <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="密码" name="use_password" id="password01">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="确认密码" id="password02">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>

            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>用户类型</label>
                        <div style="float: right;margin-right: 40px;bottom: 0px;top: 0px">
                            <select class="form-control" style="padding: 0px 0px;border-radius:2px;margin-right: 7px" name="use_type">
                                <option value="管理员">管理员</option>
                                <option value="教师">教师</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat" id="btn01">注册</button>
                </div>
                <!-- /.col -->
            </div>
        </form>



        <a href="${pageContext.request.contextPath}/login.jsp" class="text-center">我有账号，现在就去登录</a>
    </div>
    <!-- /.form-box -->
</div>
<!-- /.register-box -->

<!-- jQuery 2.2.3 -->
<!-- Bootstrap 3.3.6 -->
<!-- iCheck -->
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script>
    $(function() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
</script>

<script>
    //给表单绑定onsubmit事件
    window.onload = function () {
        document.getElementById("form01").onsubmit = function () {
            //调用检查是否为空
            //调用用户校验方法
            //调用密码校验方法
            return password_check() && name_check() && check_null();
        }
        document.getElementById("password02").onblur = password_check;
        document.getElementById("use_name").onblur = name_check;
        document.getElementById("btn01").onclick = check_null;
    }

    //验证用户名是否存在
    function name_check() {
        var use_name = document.getElementById("use_name").value;
        if (use_name !== "") {
        location.href = "${pageContext.request.contextPath}/uses/namecheck/"+use_name;}

    }
    //验证密码一致性
    function password_check() {
        var password01 = document.getElementById("password01").value;
        var password02 = document.getElementById("password02").value;
        if (password01 == password02){
            return true;
        } else {
            alert("两次密码不一致")
            return false;
        }
    }

    //验证非空
    function check_null() {
        var password01 = document.getElementById("password01").value;
        var use_name = document.getElementById("use_name").value;
        var use_phone = document.getElementById("use_phone").value;
        if (password01 == ""|| use_name == "" || use_phone == ""){
            alert("信息填写不完全")
            return false;
        }
        else {
            return true;
        }
    }

</script>
</body>

</html>
